<!--项目编码-->
<template>
  <div class='container'>
      <el-form :model="formData" ref="formData" label-width="150px">
         <el-row>
            <el-col :span="8">
                    <el-form-item
                        label="项目编码:"
                        prop="temcode"
                    >
                        <el-input
                        placeholder="请输入内容"
                        v-model="formData.temcode"
                        >
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item
                        label="项目名称:"
                        prop="itemname"
                    >
                        <el-input
                        placeholder="请输入内容"
                        v-model="formData.itemname"
                        >
                        </el-input>
                    </el-form-item>

                </el-col>
                <el-col :span="8">
                  <el-button type="primary"  @click="cusrManagerQueryHandel" class="query-btn">查 询</el-button>
                </el-col>
            </el-row>
      </el-form>
       <DicTable
           ref="commonRegionTable"
            stripe
            max-height="500"
            highlight-current-row
            :columnData="proCodeColumns"
            :tableData="proCodeTableData"
            :loading="proCodeTableLoading"
            :currentPage="proCodeTablePage.pageIndex"
            :pageSize="proCodeTablePage.pageSize"
            :pager="true"
            :totalResult="parseInt(proCodeTablePage.rowCount)"
            @cell-click="proCodeCurrentChangeEvent"
            @on-page-change="proCodeHandlePageChange"
         >
        </DicTable>

  </div>
</template>

<script>
import DicTable from "@/components/public/DicTable";
import orderSevers from "@/api/order/AendFilling";
import { mapState, mapGetters, mapActions } from "vuex";
  export default {
    // import引入的组件需要注入到对象中才能使用
    components: {
      DicTable
    },
    // 这里存放数据
    data () {
      return {
          formData:{
            temcode:"",
            itemname:""
          },
        selected:{
            name:"项目编码",
            staffCode:"",
            staffName:""
          },
        proCodeColumns: [
          { field: "itemcode", title: "项目号码" },
          { field: "itemname", title: "项目名称"},
          { field: "itemdesc", title: "项目描述"},
          { field: "applydate", title: "创建日期"}
      ],
      proCodeTableData: [],
      proCodeTableLoading: false,
      proCodeTablePage: {
        pageIndex: 1,
        pageSize: 10,
        rowCount: 0,
        pageCount: 0,
      },
      }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created () {},
    mounted () {
      this.qryProjectList();

    },
    // 方法集合
    methods: {
     async qryProjectList() {
      const params = {
             requestObject: {
                 projectJson: {
                     itemcode: this.formData.temcode,
                     itemname: this.formData.itemname,
                     page: {
                         pageNo: 1,
                         pageSize: 10,
                     },
                 },
             },
      };
      let res = await orderSevers.qryProjectList(params);

      if (res.code == 200) {
        
        this.proCodeTableData=res.meta
      }
    },

      cusrManagerQueryHandel(){
        this.proCodeTablePage.pageIndex=1;
        this.proCodeTablePage.pageSize=10;
        this.qryProjectList()
      },
       proCodeCurrentChangeEvent(){
        this.selected.staffCode=arguments[0].row.itemcode;
        this.selected.staffName=arguments[0].row.itemname;
        this.$emit("clickRow",this.selected);
      },
      proCodeHandlePageChange(val){
         this.proCodeTablePage.pageIndex=val.currentPage;
        this.proCodeTablePage.pageSize=val.pageSize;
        this.qryProjectList()
      },
      addProCodeHandel(){
        


      },

    },
    // 监听属性 类似于data概念
     computed: {
		...mapState("orders", ["orderItemList"]),
		...mapState("user", ["user"]),
  	},
    // 监控data中的数据变化
    watch: {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated () {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate () {},
    // 生命周期 - 数据挂载之前
    beforeMount () {},
    // 生命周期 - 数据更新之前
    beforeUpdate() {},
    // 生命周期 - 数据更新之后
    updated () {},
    // 生命周期 - 页面销毁之前
    beforeDestroy() {},
    // 生命周期 - 页面销毁完成
    destroyed () {},
  }
</script>

<style scoped>
  /* @import url(); 引入公共css类 */
.query-btn{
  margin-top:0.05rem;
}
</style>
